<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div>
    <div class="common-bg" ></div>
    <div class="p30  position-r ">
      <div class="fac">
        <uv-avatar size="110rpx" :src="form.brand_logo"></uv-avatar>
        <div class="pl20">
          <div class="fz36 fac" style="color: #333; font-weight: 500">
            {{ form.merchant_name }}
            <div class="p1757294107 ml20">商家</div>
          </div>
          <div class="fz30 pt10" style="color: #333">ID:{{ form.id }}</div>
        </div>
      </div>
      <div class="p1757141588 fac jcsb">
        <div class="fz34" style="color: #fff;">账户余额</div>
        <div class="fac ">
          <div class="fz42 pr30 lh1" style="font-weight: 500;color: #fff;">¥<div style="font-weight: 700;font-size: 60rpx" class="di lh1"> 0</div>
          </div>
          <button class="common-button fz30 pt10 pl30 pr30 pb10" style="">提现</button>
        </div>
      </div>
      <div class="p1757141777 fac jcsb">
        <div class="fz28  ">累计收入: <div class="fz32" style="font-weight: 500;display: inline;">¥0</div>
        </div>
        <div class="fz28  ">累计提现: <div class="fz32" style="font-weight: 500;display: inline;">¥0</div>
        </div>
      </div>
      <div class="p1757555298  f aic jcsb">
        <div class="fz28   fw500">店铺状态</div>
        <div class="p1757555505 p1757929388" :class="'p1757929388-' + shop_status">
          <uv-switch :activeValue="1" :inactiveValue="2" @change="shopStatusChange" activeColor="#22AC38" v-model="form.is_consular_alliance"></uv-switch>
        </div>
      </div>
      <div class="p1757555298  fz32 fw700" style="border-bottom: 2rpx solid #EFEFEF;">订单中心</div>
      <div class="p1757555734 pt30 pb30 f">
        <div class="p1757555741 f" @click="openTap('orderManagement?status=1')">
          <uv-icon size="70rpx" name="photo"></uv-icon>
          <div class="fz28   pt10 lh1 fw500">待付款</div>
        </div>
        <!-- status
integer 
必需
订单状态：1=待支付，2=待发货，3=待收货，4=待评价，5=已取消，6=已售后，7=已完成 -->
        <div class="p1757555741 f" @click="openTap('orderManagement?status=2')">
          <uv-icon size="70rpx" name="photo"></uv-icon>
          <div class="fz28 pt10 lh1   fw500">待发货</div>
        </div>
        <div class="p1757555741 f" @click="openTap('orderManagement?status=3')">
          <uv-icon size="70rpx" name="photo"></uv-icon>
          <div class="fz28 pt10 lh1   fw500">待收货</div>
        </div>
        <div class="p1757555741 f" @click="openTap('orderManagement?status=6')">
          <uv-icon size="70rpx" name="photo"></uv-icon>
          <div class="fz28 pt10 lh1 fw500">退款/售后</div>
        </div>
      </div>
      <div class="p1757555298  fz32 fw700" style="border-bottom: 2rpx solid #EFEFEF;">我的工具</div>
      <div class="p1757555734 pt30 pb30 f">
        <div class="p1757556212 f">
          <uv-icon size="70rpx" name="photo"></uv-icon>
          <div class=" fz28 pt10 lh1 fw500">店铺管理</div>
        </div>
        <div @click="openTap('merchandising')" class="p1757556212 f">
          <uv-icon size="70rpx" name="photo"></uv-icon>
          <div class="fz28 pt10 lh1  fw500">商品管理</div>
        </div>
        <div class="p1757556212 f">
          <uv-icon size="70rpx" name="photo"></uv-icon>
          <div class="fz28  pt10 lh1 fw500">运营数据</div>
        </div>
      </div>
      <div class="pb30 lh1">&nbsp;</div>

    </div>
    <div class="bfff">
      <uv-safe-bottom></uv-safe-bottom>
    </div>
  </div>
</template>

<script>

import myLayOutVue from './components/layOut.vue'
import { setShopStatus } from "@/api/merchant.js";
import { joinMerchantDetail } from "@/api/index.js";
export default {
  components: {
    'u-my-layOut': myLayOutVue,
  },
  data() {
    return {
      form: {
        is_consular_alliance: 2
      },
      statusBarHeight: 0,
      shop_status: '1'

    }
  },
  onShow() {
    this.$refs.uLstLayOutVue && this.$refs.uLstLayOutVue.menuButtonInfo()
    try {
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight || uni.getMenuButtonBoundingClientRect().top;
    } catch (error) {

    }
  },
  onLoad() {
    this.initPage()
  },
  methods: {
    shopStatusChange() {
      uni.showLoading({ title: '请求中', mask: true })
      setShopStatus({ shop_status: this.form.is_consular_alliance }).then(res => {
        if (res.code === 200) {
          uni.hideLoading()
          uni.$uv.toast('操作成功')
        }
      })
    },
    initPage() {
      joinMerchantDetail().then(res => {
        let data = res.result
        if (res.code === 200) {
          res.result.is_consular_alliance = Number(res.result.is_consular_alliance)
          let form = {
            merchant_name: data.merchant_name,
            id: data.id,
            brand_logo: data.brand_logo,
            is_consular_alliance: Number(data.is_consular_alliance)

          }
          this.form = form
        }
      })
    },
    openTap(url) {
      uni.navigateTo({
        url: '/pages-merchant/' + url
      });
    },
  }
}
</script>
<style>
page {
  background-color: #f7f8f8;
  color: #333;
}
</style>
<style lang="scss" scoped>
@import "./common.scss";
.bg {
  top: 0;
  left: 0;
  position: absolute;
  width: 100vw;
  z-index: 1;
}

.p1757141588 {
  margin-top: 30rpx;
  background: linear-gradient(360deg, #f27781 0%, #f8b2b6 100%);
  border-radius: 10rpx 10rpx 0 0;
  padding: 50rpx 30rpx;
}

.p1757141777 {
  background-color: #fff;
  border-radius: 0 0 10rpx 10rpx;
  padding: 25rpx 30rpx;
}
.common-button {
  border-radius: 30rpx !important;
  color: #e60012 !important;
  background-color: #fff !important;
  border-color: #fff !important;
}
.p1757555298 {
  background: #ffffff;
  padding: 25rpx 30rpx;
  margin-top: 25rpx;
}
.p1757555741 {
  flex-direction: column;
  align-items: center;
  width: 25%;
}
.p1757556212 {
  flex-direction: column;
  align-items: center;
  width: 33.333%;
}
.p1757555734 {
  background: #ffffff;
}
.p1757294107 {
  background: #e60012;
  font-weight: 500;
  font-size: 24rpx;
  color: #ffffff;
  display: inline;
  text-align: center;
  border-radius: 25rpx 4rpx 25rpx 4rpx;
  width: 110rpx;
  line-height: 40rpx;
  height: 40rpx;
}
</style>

